<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-statistic-card ant-pro-card-border ant-pro-card-contain-card"
    >
      <div
        class="ant-pro-card-body"
        style="padding: 0px;"
      >
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          All
                          <span
                            aria-describedby="test-id"
                            aria-label="question-circle"
                            class="anticon anticon-question-circle ant-pro-card-statistic-tip"
                            role="img"
                          >
                            <svg
                              aria-hidden="true"
                              data-icon="question-circle"
                              fill="currentColor"
                              focusable="false"
                              height="1em"
                              viewBox="64 64 896 896"
                              width="1em"
                            >
                              <path
                                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                              />
                              <path
                                d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
                              />
                            </svg>
                          </span>
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              10
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-divider"
        />
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-status"
                    >
                      <span
                        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
                      >
                        <span
                          class="ant-badge-status-dot ant-badge-status-default"
                        />
                      </span>
                    </div>
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Unpublished
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              5
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-status"
                    >
                      <span
                        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
                      >
                        <span
                          class="ant-badge-status-dot ant-badge-status-processing"
                        />
                      </span>
                    </div>
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Publishing
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              3
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-status"
                    >
                      <span
                        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
                      >
                        <span
                          class="ant-badge-status-dot ant-badge-status-error"
                        />
                      </span>
                    </div>
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Publishing Error
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              2
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-status"
                    >
                      <span
                        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
                      >
                        <span
                          class="ant-badge-status-dot ant-badge-status-success"
                        />
                      </span>
                    </div>
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Published Successfully
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            -
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        StatisticCard Status Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            statistic.title
          </strong>
          : 统计项标题
        </li>
        <li>
          <strong>
            statistic.tip
          </strong>
          : 提示信息，鼠标悬停时显示
        </li>
        <li>
          <strong>
            statistic.value
          </strong>
          : 统计数值，可以是数字、字符串或 '-'
        </li>
        <li>
          <strong>
            statistic.status
          </strong>
          : 状态指示，可选值：'default' | 'processing' | 'error' | 'success'
        </li>
      </ul>
      <h4>
        Status 状态说明：
      </h4>
      <ul>
        <li>
          <strong>
            default
          </strong>
          : 默认状态，无特殊颜色标识
        </li>
        <li>
          <strong>
            processing
          </strong>
          : 处理中状态，显示蓝色或橙色
        </li>
        <li>
          <strong>
            error
          </strong>
          : 错误状态，显示红色
        </li>
        <li>
          <strong>
            success
          </strong>
          : 成功状态，显示绿色
        </li>
      </ul>
      <h4>
        状态显示特点：
      </h4>
      <ul>
        <li>
          <strong>
            颜色区分
          </strong>
          : 不同状态使用不同的颜色进行区分
        </li>
        <li>
          <strong>
            视觉反馈
          </strong>
          : 通过颜色提供直观的状态反馈
        </li>
        <li>
          <strong>
            语义化
          </strong>
          : 状态值与业务语义相对应
        </li>
      </ul>
      <h4>
        Divider 组件：
      </h4>
      <ul>
        <li>
          <strong>
            默认分割线
          </strong>
          : 不设置 type 时使用默认分割线
        </li>
        <li>
          <strong>
            分隔作用
          </strong>
          : 用于分隔不同的统计项
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            状态统计
          </strong>
          : 统计不同状态下的数据量
        </li>
        <li>
          <strong>
            进度监控
          </strong>
          : 监控任务或流程的执行状态
        </li>
        <li>
          <strong>
            错误统计
          </strong>
          : 统计错误和成功的数据
        </li>
        <li>
          <strong>
            状态展示
          </strong>
          : 展示系统或业务的状态分布
        </li>
      </ul>
      <h4>
        最佳实践：
      </h4>
      <ul>
        <li>
          <strong>
            状态一致性
          </strong>
          : 保持状态值与业务逻辑的一致性
        </li>
        <li>
          <strong>
            颜色语义
          </strong>
          : 使用符合用户认知的颜色语义
        </li>
        <li>
          <strong>
            数据完整性
          </strong>
          : 确保所有状态的数据都有统计
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>